<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>首页</title>
<%@include file="../static/include/head.jsp"%>

<script src="<%=request.getContextPath()%>/static/assets/global/scripts/metronic.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/static/assets/admin/layout/scripts/layout.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/static/assets/admin/layout/scripts/quick-sidebar.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/static/assets/admin/layout/scripts/demo.js" type="text/javascript"></script>

<link href="<%=request.getContextPath()%>/static/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
<script src="<%=request.getContextPath()%>/static/assets/global/plugins/datatables/media/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/static/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js" type="text/javascript"></script>

<link href="<%=request.getContextPath()%>/static/assets/global/plugins/bootstrap-datepicker/css/datepicker.css" rel="stylesheet" type="text/css" />
<script src="<%=request.getContextPath()%>/static/assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js" type="text/javascript"></script>

<script>
	/* function setDatePickerYesterday(){
		$("#dateFrom").datepicker( 'setDate' ,'0d' );
		$("#dateTo").datepicker( 'setDate' ,'+30d');
	} */
	jQuery(document).ready(function() {
		Metronic.init();
		Layout.init();
		QuickSidebar.init();
		Demo.init();

		/* $('.date-picker').datepicker({
			language : 'cn',
			todayBtn : true,
			autoclose : true,
			forceParse : true,
			format : "yyyy-mm-dd"
		});
		
		setDatePickerYesterday(); */
		
		$("#serchButton").click(function(){
			tableNoticeInit.fnDraw();
		});

		var tableNoticeInit = $("#table_notice").dataTable({
			"paging" : true, //翻页功能
			"lengthChange" : true, //改变每页显示数据数量
			"searching" : false, //过滤功能
			"ordering" : true, //排序功能
			"order" : [ [ 0, "desc" ] ],
			"processing" : false,
			"serverSide" : true, //服务器数据
			"lengthMenu" : [ 10, 15, 30, 50 ],
			"pageLength" : 10,
			"language" : {
				"processing" : "努力加载中...",
				"search" : "搜索&nbsp;:",
				"lengthMenu" : "一页显示 _MENU_ 条数据",
				"info" : "当前第 _START_ 条到第 _END_ 条记录，共 _TOTAL_ 条记录",
				"loadingRecords" : "正在努力的加载数据...",
				"infoEmpty" : "当前第 0 条到第 0 条记录，共 0 条记录",
		        "emptyTable" : "没有找到您查询的数据信息"
			},
			"ajax" : {
				"url" : "getNoticesByDate",
				"type" : "POST",
				"data" : function(data) {
					data.isLook = $("input[name='isLook']:checked").val();
					/* data.dateFrom = $("#dateFrom").val();
					data.dateTo = $("#dateTo").val(); */
				}
			},
			"columns" : [ {
				"data" : "id"
			}, {
				"data" : "newNumber"
			}, {
				"data" : "oldNumber"
			}, {
				"data" : "jfDate"
			}, {
				"data" : "payPeriod"
			}, {
				"data" : "isLook",
				render: function ( data, type, row ) {
			        if (data == 0) {
			        	 return '未查看';
			        }else{
			        	return '已查看';
			        }
			    }
			}, {
				"width": "150px",
				"data" : "createTime",
				render: function ( data, type, row ) {
					if(data!=null){
						return new Date(data).toLocaleString().replace("/","年").replace("/","月").replace(" ","日 ").split(" ")[0];
			        }else{
			        	return '';
			        }
			    }
			}, {
				"width": "150px",
				"data" : "operateTime",
				render: function ( data, type, row ) {
					if(data!=null){
						return new Date(data).toLocaleString().replace("/","年").replace("/","月").replace(" ","日 ").split(" ")[0];
			        }else{
			        	return '';
			        }
			    }
			},{
				"orderable": false,
				"data" : null,
				render: function ( data, type, row ) {
					if(row.isLook == 0){
						return "<div style='width:60'><button type='button' onclick='updateNoticeInit($(this))' class='btn blue btn-xs'>修改为已查看 <i class='fa fa-edit'></i></button></div>";
					}else{
						return "已查看";
					}
			    }
			} ]
		}); 
	});
	function updateNoticeInit(item) {
		$("#notice_id_update").val("");
        var tableRow = item.parents('tr')[0];
        var idTh = $(tableRow).children().get(0);
        var userNameTh = $(tableRow).children().get(1);
        var userAliasTh = $(tableRow).children().get(2);
        var id = $(idTh).text();
        $("#notice_id_update").val(id);
        var message = "您确定要修改编号:"+id+"的记录为已查看吗?"
        $("#notice_p").text(message);
        $("#noticeUpdate_div").modal("show");
    };
    
    function update_notice(){
		$.post("<%=request.getContextPath()%>/notice/updateNotice", 
	    	{ 
				id:$("#notice_id_update").val()
	    	}, 
	    	function(result){
	    		if(result == -1){
					alert("系统内部错误,请与管理员联系！");
				}else if(result == 0){
					alert("修改通知状态成功！");
					$("#noticeUpdate_div").modal("hide");
					$("#notice_id_update").val("");
					$("#table_notice").dataTable().fnDraw();
				}
			}
	    );
	}
</script>
</head>
<body class="page-header-fixed page-quick-sidebar-over-content">
	<%@include file="../static/include/header.jsp"%>
	<div class="clearfix"></div>
	<div class="page-container">
		<%@include file="../static/include/sidebar.jsp"%>
		<!-- BEGIN CONTENT -->
		<div class="page-content-wrapper">
			<div class="page-content">
				<!-- BEGIN STYLE CUSTOMIZER -->
				<%@include file="../static/include/styles.jsp"%>
				<!-- END STYLE CUSTOMIZER -->
				<div class="row">
					<div class="col-md-12">
						<!-- BEGIN PAGE HEADER-->
						<h3 class="page-title">
							查表通知 <small>您即将到来的查表日期</small>
						</h3>
						<div class="page-bar">
							<ul class="page-breadcrumb">
								<li>
									<i class="fa fa-home"></i>
									<a href="index">主页</a>
								</li>
							</ul>
						</div>
						<!-- END PAGE HEADER-->
						<!-- BEGIN ROW -->
						<div class="portlet box blue-madison">
							<div class="portlet-title">
								<div class="caption">
									<i class="fa icon-paper-plane"></i>通知
								</div>
								<div class="tools">
									<a href="javascript:;" class="collapse"></a>
								</div>
							</div>
							<div class="portlet-body">
								<div>
									<ul class="nav nav-tabs ">
										<li style="float: left">
											<div class="radio-list">
												<label class="radio-inline">
													<input type="radio" name="isLook" id="checkTable1" value="0" checked> 未查看
												</label>
												<label class="radio-inline">
													<input type="radio" name="isLook" id="checkTable2" value="1"> 已查看
												</label>
											</div>
										</li>
										<li style="float: right">
											<button id="serchButton" type="button" class="btn green">搜索</button>
										</li>
										<!-- <li style="float: right">
											<div class="col-md-4">
												<div class="input-group input-large date-picker input-daterange" data-date-format="yyyy-mm-dd">
													<span class="input-group-addon">日期</span>
													<input id="dateFrom" type="text" class="form-control" name="dateFrom">
													<span class="input-group-addon">到 </span>
													<input id="dateTo" type="text" class="form-control" name="dateTo">
												</div>
											</div>
										</li> -->
									</ul>
									<div class="tab-pane fade active in" id="tab_1_1">
										<table id="table_notice" class="table table-striped table-hover table-bordered">
											<thead>
												<tr>
													<th>编号</th>
													<th>新站号</th>
													<th>旧站号</th>
													<th>查表日期</th>
													<th>年</th>
													<th>是否已查看</th>
													<th>创建时间</th>
													<th>修改时间</th>
													<th>操作</th>
												</tr>
											</thead>
											<tbody>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
						<!-- END ROW -->
					</div>
				</div>
			</div>
			<!-- END CONTENT -->
		</div>
	</div>
	<%@include file="../static/include/footer.jsp"%>
	<!-- modal BEGIN -->
	<div id="noticeUpdate_div" class="modal fade" tabindex="-1" aria-hidden="true">
		<div class="modal-dialog">
			<div class="portlet box yellow">
				<div class="portlet-title">
					<div class="caption">
						<i class="fa fa-user"></i>通知管理
					</div>
					<div class="tools">
						修改通知状态
					</div>
				</div>
				<div class="portlet-body form">
					<div class="form-body">
						<input class="col-md-10" id="notice_id_update" type="text" readonly="readonly" hidden="true"></input>
						<p id="notice_p"></p>
					</div>
					<div class="form-actions right">
						<button type="button" data-dismiss="modal" class="btn default">返回</button>
						<button type="button" onclick="update_notice()" class="btn red">确定</button>
					</div>		
				</div>
			</div>
		</div>
	</div>
	<!-- modal END -->
</body>
</html>